<template>
    <div class="box">
        <div class="header">
            <h4>积分兑换</h4> 
            <span>兑换记录 ></span>
        </div>
        <div class="dlbox">
        <dl v-for="(v,i) in duihuandata" :key="i" @click="duihuanFn(v)">
            <dd><img :src="v.tupian" alt=""></dd>
            <dt>
                <h6>{{v.name}}</h6>
                <p>{{v.jifen}}</p>
            </dt>
        </dl>
        </div>
    </div>
</template>
<script>
export default {
    props: ['duihuandata'],
   methods: {
       duihuanFn(v){
           this.$router.push({
               path:"/xiangq",
               query:{
                   thisid:v
               }
           })
       }
   },
}
</script>
<style scoped>
.box{
    padding: 0 20px;
}
.header{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 48px;
}
.header h4 ,.header span{
    align-self: center;
}
.header h4{
    font-weight: 600;
}
.header span{
    font-size: 14px;
    color: #ccc;
}
.dlbox{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
dl{
    width: 160px;
    height: 210px;
    border: 1px solid #dfe0e3;
    border-radius: 5px;
    margin: 10px 0;
}
dd{
    height: 125px;
    background: #f2f2f2;
    display: flex;
    justify-content: center;
}
dd img{
    width: 100px;
    height: 76px;
    align-self: center;
}
dt h6{
    font-size: 14px;
    font-weight: 600;
    margin-left: 10px;
    margin-top: 10px;
}
dt p{
     font-size: 10px;
    font-weight: 600;
    color: red;
    margin-left: 10px;
    margin-top: 30px;
}
</style>